<template>
	<view class="list">
		<view class="list-item-box" v-for="(v,k) in list">
			<view>{{v.name}}</view>
			<view class="children">
				<view class="children-item" :class="{active:v.childrenIndex == kk}" @click="check(k,kk)"
					v-for="(vv,kk) in v.children">{{vv.name}}</view>
			</view>
		</view>

		<view class="btn">
			<view class="reset" @click="reset">重置</view>
			<view class="submit" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '价格',
					childrenIndex: -1,
					children: [{
						name: '50以下',
						id: 1
					}, {
						name: '50-100',
						id: 2
					}, {
						name: '100-300',
						id: 3
					}, {
						name: '300以上',
						id: 4
					}]
				}, {
					name: '营业时间',
					childrenIndex: -1,
					children: [{
						name: '0-5时',
						id: 1
					}, {
						name: '5-10时',
						id: 2
					}, {
						name: '10-14时',
						id: 3
					}, {
						name: '14-17时',
						id: 4
					}, {
						name: '17-21时',
						id: 5
					}, {
						name: '21-24时',
						id: 6
					}, {
						name: '营业中',
						id: 7
					}, {
						name: '24小时营业',
						id: 8
					}]
				}]
			}
		},
		methods: {
			check(k, kk) {
				if (this.list[k].childrenIndex == kk) {
					this.list[k].childrenIndex = -1
				} else {
					this.list[k].childrenIndex = kk
				}
			},
			reset() {
				for (let i of this.list) {
					i.childrenIndex = -1
				}
			},
			submit() {
				let value = []
				for (let i of this.list) {
					if (i.childrenIndex == -1) {
						value.push('')
					} else {
						value.push(i.children[i.childrenIndex].id)
					}
				}
				this.$emit('change', value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
		line-height: 80rpx;
		padding: 0 37rpx;

		&-item-box {
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
		}

		.children {
			display: flex;
			gap: 20rpx;
			flex-wrap: wrap;

			view {
				padding: 0 20rpx;
				line-height: 66rpx;
				text-align: center;
				background: #F6F6F6;
				border-radius: 10rpx;
				box-sizing: border-box;
				border: 1px solid #F6F6F6;
			}

			view.active {
				background: #FEF7F4 !important;
				border-radius: 5rpx !important;
				border: 1px solid #F6B99F !important;
				color: #F6B99F !important;
			}
		}
	}

	.btn {
		display: flex;
		gap: 24rpx;
		margin: 100rpx 0 50rpx;

		view {
			flex: 1;
			height: 86rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 80rpx;
		}

		.reset {
			background: #F6F6F6;
			border-radius: 10rpx;
			color: #666666;
		}

		.submit {
			color: #FFFFFF;
			background: linear-gradient(90deg, #DD551B, #F49355);
			border-radius: 10rpx;

		}
	}
</style>